<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/coupon' }"
      >优惠券管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div class="obj_item">
            计划名称：{{ dataObj.name ? dataObj.name : "-" }}
          </div>
          <div class="obj_item">
            拨款状态：{{
              dataObj.state
                ? options2.find((item) => item.value === dataObj.state).label
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            使用人数：{{ dataObj.useNumber ? dataObj.useNumber : "-" }}
          </div>
          <div class="obj_item">
            申请优惠劵金额：{{
              dataObj.appliedAmount ? dataObj.appliedAmount : "-"
            }}
          </div>
          <div class="obj_item">
            拨款总额：{{
              dataObj.appropriationAmount ? dataObj.appropriationAmount : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            拨款时间：<span
              v-html="dataObj.createTime ? dataObj.createTime : '-'"
            />
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            备注：<span v-html="dataObj.content ? dataObj.content : '-'" />
          </div>
        </div>
      </div>
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">宝宝使用优惠券记录</div>
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px"
          border
        >
          <el-table-column prop="childName" label="宝宝姓名" align="center" />
          <el-table-column prop="className" label="所在班级" align="center" />
          <el-table-column
            prop="attendanceDays"
            label="本月考勤天数"
            align="center"
          />
          <el-table-column
            prop="attendanceDays"
            label="实际考勤天数"
            align="center"
          />
          <el-table-column prop="birthDate" label="出生年月" align="center" />
          <el-table-column prop="sex" label="性别" align="center" />
          <el-table-column prop="age" label="月龄" align="center" />
          <el-table-column prop="idCard" label="身份证号" align="center">
            <template slot-scope="scope">
              {{ scope.row.idCard ? scope.row.idCard : "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="parentName" label="家长姓名" align="center" />
          <el-table-column prop="contactInfo" label="联系方式" align="center" />
          <el-table-column
            prop="updateTime"
            label="使用时间"
            width="180"
            align="center"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { couponDetails } from './api'
import { mapGetters } from 'vuex'
import fileImage from '@/assets/file_image.png'
export default {
  data () {
    return {
      textarea: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      dataObj: {},
      tableData: [],
      options2: [
        {
          value: 0,
          label: '未拨付'
        },
        {
          value: 1,
          label: '已拨付'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleCouponDetails()
  },
  mounted () {},
  methods: {
    async handleCouponDetails () {
      const res = await couponDetails({
        id: this.idS,
        areaId: this.curArea.id
      })
      this.dataObj = res
      this.tableData = res.list
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.url, '_blank')
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  display: none !important;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 50px;
  padding-right: 400px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
